<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>任务二：零基础HTML编码</title>
	</head>
	<body>
<style type="text/css">

	*{margin: 0px; padding: 0px;}
	img{ border: none;}
	table { border-collapse: collapse; border-spacing: 0; }
	table tr{ border:#999999;}
	body{ font-size: 14px; background:#CCCCCC; font-family: "微软雅黑";}
	h2{ padding-top:20px ; font-size: 30px; color: #3D3D3D;}
	h4{ font-size: 20px; line-height: 30px; color: #999999; padding: 10px 0;}
	.list-none{list-style:none;}
	.fl{ float: left;}
	.fr{ float: right;}
	.pdding-10x{ padding: 10px;}
	.clear{ clear: both;}
	.text-hui{color: #999999;}
	.box{width: 1240px; margin: 0 auto; }
	.container{padding: 20px;  border: solid 1px #999; background: #fff; margin-bottom: 20px;}
	.container p{ line-height: 30px; color: #000; text-indent: 2em;}
	.nav{ background: #3D3D3D; height: 50px; line-height: 50px;}
	.nav li { float: left; }
	.nav li a{ color: #fff; text-decoration: none; padding-right: 20px;}
	.list-img{width: 150px; border: 1px solid #999999; padding: 15px; text-align: center; margin-bottom: 30px;}
	.list-img span{ text-align: center; width: 100%;  line-break: 30px; height: 30px; display: block;}
	.list-img img{ width: 100%; display: block;}
	.sidebar{ height: 35px; line-break: 35px; border-left:solid 2px #999999; padding-left: 30px; font-size: 20px;}
	.form{ width: 100%;}
	.form p{ line-break: 35px; height: 35px; display: block; text-indent: 1em;}
	.form span{ display: block; line-height: 35px; height: 35px;}
	.form-left{ width: 40%; text-align: right; float: left;}
	.form-right{ width: 60%; text-align: left; float: left;}
	.input-50{ width: 50%; height: 40px;}
	.input-100{ width: 100%; line-height: 35px; color: #fff; background:#03F; border-radius: 10px; margin-top: 20px;}
	
</style>	

<header class="nav">
	<div class="box">
		<a href="https://www.baidu.com" class="fl"><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png" width="100" alt="百度"/></a>
		<ul class="fr">
			<li><a href="#">导航链接一</a></li>
			<li><a href="#">导航链接二</a></li>
			<li><a href="#">导航链接三</a></li>
			<li><a href="#">导航链接四</a></li>
		</ul>
	</div>
</header>	
<br />
<div class="box">
	<div class="container">
		<h2>文章一级标题</h2>
		<h4>文章二级标题</h4>
		<div class="text-hui">文章作者际发表时间</div>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，</p>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com/">连接到百度前端技术学院</a>这是一个很长的段落，一个很长的段落，这是一个很长的一个很长的段落，这是一个很长的这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" width="300" class="pdding-10x" alt="这是一个图片描述">
		<p>这是一个很长的段落，这是一个很长的段一个很长的段落，这是一个很一个很长的段落，这是一个，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<p>这是一个很长的段落，这是一个很长的段一个很长的段落，这是一个很一个很长的段落，这是一个很落，这是一个很长的段落，<a href="http://ife.baidu.com/" target="_blank">新窗口连接到百度前端技术学院</a>这是一个很长的段落，一个很长的段落，这是一个很长的一个很长的段落，这是一个很长的这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
	</div>		
</div>		

<div class="box">
	<div class="container">		
		<h2>另一篇文章一级标题</h2>
		<h4>文章二级标题</h4>
		<div class="text-hui">文章作者&nbsp;际发表时间</div>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，</p>
		<br />
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com/">连接到百度前端技术学院</a>这是一个很长的段落，一个很长的段落，这是一个很长的一个很长的段落，这是一个很长的这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" width="300" class="pdding-10x" alt="这是一个图片描述">
		<ul class="list-none">
			<li>列表项目一</li>
			<li>列表项目二</li>
			<li>列表项目三</li>
		</ul>	
	</div>		
</div>	

<div class="box">
	<div class="container">	
		<h2>图片</h2><br />
		<div class="list-img"><span>好看的图片</span><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg"  alt="好看的图片"></div>
		<div class="list-img"><span>好看的图片</span><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg"  alt="好看的图片"></div>
		<div class="list-img"><span>好看的图片</span><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg"  alt="好看的图片"></div>
		<div class="list-img"><span>好看的图片</span><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg"  alt="好看的图片"></div>
		
	</div>		
</div>

<div class="box">
	<div class="container">	

		<h2>最后文章一级标题</h2>
		<h4>文章二级标题</h4>
		
		<div class="text-hui">文章作者&nbsp;文章发表时间</div>
		<ol style=" padding-left: 40px;  font-weight: bold;">
			<li>排名1</li>
			<li>排名2</li>
			<li>排名3</li>
		</ol><br />
		<div>下面是一个表格，给表哥添加一个border="1"好让你看出是一个表格</div>
		<br />
		<table width="1000" bordercolor="#ccc" border="1px">
			  <tr bgcolor="#333333" style="color:#FFF;">
			    <td width="400">表头</td>
			    <td width="400">表头</td>
			    <td width="100">表头</td>
		  </tr>
			  <tr>
			    <td width="400">表内容单元格</td>
			    <td width="400">表内容单元格</td>
			    <td width="100"><a href="#">操作</a></td>
			  </tr>
			  <tr>
			    <td width="400">表内容单元格</td>
			    <td width="400">表内容单元格</td>
			    <td width="100"><a href="#">操作</a></td>
			  </tr>
			  <tr>
			    <td width="400">表内容单元格</td>
			    <td width="400">表内容单元格</td>
			    <td width="100"><a href="#">操作</a></td>
			  </tr>
			  <tr>
			    <td width="400">表内容单元格</td>
			    <td width="400">表内容单元格</td>
			    <td width="100"><a href="#">操作</a></td>
			  </tr>
			  <tr bgcolor="#999999">
			    <td width="400">总计</td>
			    <td width="400">1000</td>
			      <td>&nbsp;</td>
			  </tr>
		</table>
	</div>		
</div>		
		
<div class="box">
	<div class="container">			
		<h2 class="sidebar">这里是一个标题栏，标题栏</h2>

		<form id="form1" name="form1" method="post" action="" class="form">
			<div>
				<span class="form-left">请输入邮箱地址：</span>
				<p class="form-right"><input name="" type="text"  placeholder="这是一个文本输入框"/></p>
			</div>
			
			<div>
				<span class="form-left"></span>
				<p class="form-right">邮箱地址请安要求输入</p>
			</div>
			
			<div>
				<span class="form-left">请输入密码：</span>
				<p class="form-right"><input name="" type="password"  placeholder="这是一个文本输入框"/></p>
			</div>
			
			<div>
				<span class="form-left">请重复输入密码：</span>
				<p class="form-right"><input name="" type="password"  placeholder="这是一个文本输入框"/></p>
			</div>
			
			<div>
				<span class="form-left"></span>
				<p class="form-right">密码请设为6-16位英文数字</p>
			</div>
			
			<div>
				<span class="form-left">性别：</span>
				<p class="form-right"><label><input type="checkbox" name="title" value="nan" id="title_0" />男 </label> 
				  	<label> <input type="checkbox" name="title" value="nv" id="title_1" />女</label>
				</p>
			</div>
			
			<div>
					<span class="form-left">城市：</span>
					<p class="form-right"><select name="ddlOther" id="ddlOther">
						<optgroup label="请选择">
							<option value="0">北京</option>
							<option value="0">上海</option>
							<option value="0">深圳</option>
						</optgroup>
					</select></p>	
			</div>
			
			<div>
				<span class="form-left">爱好：</span>
				<p class="form-right"><input name="" type="checkbox" value="" /><i>运动</i>
			   	<input name="" type="checkbox" value="" /><i>艺术</i>
			   	<input name="" type="checkbox" value="" /><i>科学</i></p>
			</p>  
			</div>
			
			<div>
			 <span class="form-left">个人描述：</span>
			<p class="form-right"><textarea name="" placeholder="这是一个多行输入框，输入您的表述" class="input-50"></textarea></p>
			</div>
			
		
			<input name="" type="submit" class="input-100"/>
			</form>
	<div class="clear"></div>
	</div>		
</div>			
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
